<template>
    <div class="product_list">
        <!-- $router带r通常是方法 跳转push 替换replace 后退back 前进forward -->
        <div 
        @click="$router.push('/product/'+product.action.path)"
        class="product" v-for="(product,index) in list" :key="index">
            <!-- 图片 -->
            <div class="pic">
                <img v-lazy="product.puzzle_url"/>
            </div>
            <!-- 内容 -->
            <div class="info">
                <p>{{ product.name }}</p>
                <p>{{ product.price }} 
                    <!-- 标签labels -->
                    <span v-for="label in product.labels" :key="label">{{ label }}</span>
                </p>
            </div>
        </div>   
    </div>
</template>
<script>
export default {
    props:{
        // 父组件传递过来的参数
        list:{type:Array,default(){return []}}
    }
}
</script>
<style lang="scss" scoped>
    .product{
        background-color: #fafafa;
        padding: .1rem;
        border-radius: .1rem;
        display: flex;
        margin: .2rem;
        .pic{
            width: 1.5rem;
            img{ width: 80%; margin: 0 auto;}
        }
        .info{
            flex:1;
        }
    }
</style>